<template>
    <div>
<el-button @click="open" type="primary" style="margin-left: 16px;">
  点我打开
</el-button>

<el-drawer
  title="关闭"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose"
  :class="{ltr:ltr,ttb:ttb,rtl:rtl,btt:btt}"
  :wrapperClosable=wrapperClosable
  :size=size>
  <!-- <span>我来啦!</span> -->
   <slot name='conte'></slot>
   <!-- <slot name='conte2'></slot> -->
</el-drawer>
    </div>
</template>

<script>
    export default {
      props:{
        size:{
          type: String || Number,
          default:'25%',
        },
        // ltr从左往右开
        // rtl从右往左开
        // ttb从上往下开
        // btt从下往上开
        direction:{
          type: String,
          default:'ltr',
        },
        bgColor: {
          type: String,
          default: "rgba(0, 0, 0,0.6)",
        },
        wrapperClosable:{
          type: Boolean,
          default:false
        }
      },
        data() {
      return {
        drawer: false,
        // direction: 'ltr',
        rotate:false,
        ltr:false,
        ttb:false,
        rtl:false,
        btt:false
      };
    },
    computed: {
      
    },
    watch:{
      'direction'(val){
        if(val === 'ltr'){
          this.ltr = true
        }else if(val === 'ttb'){
          this.ttb = true
        }else if(val === 'rtl'){
          this.rtl = true 
        }else if(val === 'btt'){
          this.btt = true 
        }
      }
    },
    mounted() {
        this.clickSpan()
        
    },
    methods: {
      handleClose(done) {
        this.close()
        done();
      },
      close(){
        let aa = document.querySelector(".el-drawer__close-btn")
        aa.classList.remove('rotate')
        this.ltr = false
        this.ttb = false
        this.rtl = false
        this.btt = false 
      },
      open(){
        
        
        this.drawer = true
        this.rotate = true
        setTimeout(() => {
            let aa = document.querySelector(".el-drawer__close-btn")
            aa.classList.add('rotate')
            this.getBgcolor()
        }, 100);
        
      },
      clickSpan(){
        let bb = document.querySelector(".el-drawer__header")
        console.log(bb.firstChild);
        let that = this
        bb.firstChild.addEventListener("click",function(){
         that.drawer = false
         that.close()

        })
      },
      getBgcolor(){
        let _header = document.querySelector(".el-drawer__header")
        let _body = document.querySelector(".el-drawer__body")
        console.log(_header,_body);
        _header.style.backgroundColor = this.bgColor
        _body.style.backgroundColor = this.bgColor
      }
    }
    }
</script>

<style scoped lang='scss'>
::v-deep .rotate{
    transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
    transition: 1s; 
}
::v-deep .el-drawer{
    background-color: transparent;
}
::v-deep .el-drawer__header{
    background-color: rgba(0, 0, 0,0.6);
    margin-bottom: unset;
    color: #fefefe;
    padding: 40px 20px 0;
} 
::v-deep .el-drawer__body{
    background-color: rgba(0, 0, 0,0.6);
    color: #fff;
}
// 左到右
::v-deep .ltr .el-drawer__header>:first-child {
    flex: unset;
    position: absolute;
    left: 60px;
    font-size: 18px;
    margin-top: -5px;
    cursor: pointer;
}
::v-deep .ltr .el-drawer__close-btn{
    // position: absolute;
    // right: 50px;
    margin-left: 5px;
    font-size: 18px;
}
// 上到下
::v-deep .ttb .el-drawer__header>:first-child {
    flex: unset;
    position: absolute;
    right: 60px;
    font-size: 18px;
    margin-top: -5px;
    cursor: pointer;
}
::v-deep .ttb .el-drawer__close-btn{
    // position: absolute;
    // right: 50px;
    margin-left: 94%;
    font-size: 18px;
}
// 右到左 rtl
::v-deep .rtl .el-drawer__header>:first-child {
    flex: unset;
    position: absolute;
    right: 30px;
    font-size: 18px;
    margin-top: -5px;
    cursor: pointer;
}
::v-deep .rtl .el-drawer__close-btn{
    // position: absolute;
    // right: 50px;
    margin-left: 85%;
    font-size: 18px;
}
// 下到上 
::v-deep .btt .el-drawer__header>:first-child {
    flex: unset;
    position: absolute;
    right: 60px;
    font-size: 18px;
    margin-top: -5px;
    cursor: pointer;
}
::v-deep .btt .el-drawer__close-btn{
    // position: absolute;
    // right: 50px;
    margin-left: 94%;
    font-size: 18px;
}
</style>